<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .red {
        color: red;
    }
</style>

<body>
    <div class="qwe q e">
        123
    </div>

    <button>
        点击
    </button>
    <script>
        // var btn = document.querySelector("button")
        // var div = document.querySelector("div")
        // btn.onclick = function () {
        //     div.classList.toggle("red")
        // }
        // var div = document.querySelector("div")

        // div.classList.add("tt")
        // div.classList.remove("qwe")
        // div.classList.toggle("qwe")
        // div.classList.toggle("qwe")

        // console.log(div)

        // console.log(div.classList.contains("qweqwe"))

        // 元素.className  操作类名

        // 元素.classList.方法名

        // add(类名) 添加类名
        // contains(类名)  存在类名 返回true  否则返回false
        // remove(类名)  删除类名
        // toggle(类名)  切换类型

    </script>
</body>

</html>